<!DOCTYPE html>
<html xmlns=http://www.w3.org/1999/xhtml xmlns:bd=http://www.baidu.com/2010/xbdml>
<head>
    <title>用电监测</title>
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="/pc/layui/css/layui.css" media="all" />
    <style type="text/css">
    #address select{width: 9em;height: 30px;border: 1px solid #c0c0c0;border-radius: 5px;outline: none;}
    #address select option{width: 6em;max-width: 100px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}
  </style>
</head>
<body  class="childrenBody" style="background-color:#eee">
     <div style="position: fixed; width:650px;height: 100%;background-color:white;border-radius: 5%;margin-left: 3%;">
       <div style="width: 100px;margin-top: 1%;margin-left:8%; height: 100px;background: #efefef;text-align: center;line-height: 100px;border-radius: 50%;"><img src="/NB/ieu/img/zhyd.png" alt=""></div>
         <p style="margin-top: -3.5em; font-size: 25px; color: #1AA094; font-weight: bold;    margin-left: 10em">智慧用电设备</p>
         <p style=" margin-top: 0.5em; font-size: 15px; color: #1AA094; font-weight: bold; margin-left: 19em;" >设备总数:<span style="color: red;font-family: fantasy">&nbsp;5</span></p>
         <div style="margin-top: 10%;margin-left: 8%;font-size: 15px;font-weight: bold;position: relative;">
          <span><img src="/NB/iff/img/wz.png" alt=""></span>
          <p>位置</p>
          <div id="address" style="position: absolute;left: 3em;top: 1.2em;">
              <select class="select" id="province" name="province">
                <option value="">选择区域</option>
              </select>
              
              <select name="city" id="city">
                <option value="">选择建筑</option>
              </select>
          
              <select name="town" id="town">
                <option value="">选择房间</option>
              </select>
          </div>
           <a class="layui-btn layui-btn-mini" style="height: 30px;line-height: 30px;padding: 0 11px;font-size: 12px;position: absolute;left: 39em;top: 1.5em;" ><i class="iconfont icon-edit"></i> 查看</a>
          </div>
          
        <div style=" width: 100%; margin-top: 6%;margin-left: 8%;">
          <li style=" width: 33%;float: left;">
            <span ><img  style="width: 20px;margin-left: 1%;" src="/NB/ieu/img/zhyd1.png" alt=""></span>
             <p style="font-size: 15px;font-weight: bold;">设备<span style="color: red;font-weight: bold;font-size: 18px">&nbsp;0000000000000001</span>
             </p>
          </li>
          <li style=" width: 33%;float: right;">
            <span ><img  style="width: 20px;margin-left:12%;" src="/NB/ieu/img/pdx.png" alt=""></span>
            <p style="font-size: 15px;font-weight: bold;">变电箱温度:<span style="color: red;">25</span><span>℃</span>
            </p>
          </li>
          <li style=" width: 33%;float:right;">
            <span ><img  style="width: 20px;margin-left: 10%;" src="/NB/ieu/img/ld.png" alt=""></span>
            <p style="font-size: 15px;font-weight: bold;">是否漏电:<span style="color: red;">是</span>
            </p>
          </li>
        </div>
        <div style="margin-top: 20%;margin-left: 8%;width: 100%">
          <li style=" float: left;width: 33%">
            <span ><img  style="width: 20px;margin-left: 1%;" src="/NB/ieu/img/hx.png" alt=""></span>
            <p style="font-size: 15px;font-weight: bold;">火线1</p>
          </li>
       
            <li style="float: left;width: 33%;">
            <span ><img  style="width: 20px;margin-left: 1%;" src="/NB/ieu/img/wd.png" alt=""></span>
            <p style="font-size: 15px;font-weight: bold;">温度:<span style="color: red;">25</span><span>℃</span></p>
          </li>
           <li style="float: right;width: 33%;">
             <span ><img  style="width: 20px;margin-left: 1%;" src="/NB/ieu/img/dl.png" alt=""></span>
             <p style="font-size: 15px;font-weight: bold;">电流:<span style="color: red;">1000</span><span>安</span></p>
           </li> 
        </div>
        <div style="margin-top: 34%;margin-left: 8%;width: 100%">
          <li style=" float: left;width: 33%">
            <span ><img  style="width: 20px;margin-left: 1%;" src="/NB/ieu/img/hx.png" alt=""></span>
            <p style="font-size: 15px;font-weight: bold;">火线2</p>
          </li>
       
            <li style="float: left;width: 33%;">
            <span ><img  style="width: 20px;margin-left: 1%;" src="/NB/ieu/img/wd.png" alt=""></span>
            <p style="font-size: 15px;font-weight: bold;">温度:<span style="color: red;">25</span><span>℃</span></p>
          </li>
           <li style="float: right;width: 33%;">
             <span ><img  style="width: 20px;margin-left: 1%;" src="/NB/ieu/img/dl.png" alt=""></span>
             <p style="font-size: 15px;font-weight: bold;">电流:<span style="color: red;">1000</span><span>安</span></p>
           </li> 
        </div>
        <div style="margin-top:48%;margin-left: 8%;width: 100%">
          <li style=" float: left;width: 33%">
            <span ><img  style="width: 20px;margin-left: 1%;" src="/NB/ieu/img/hx.png" alt=""></span>
            <p style="font-size: 15px;font-weight: bold;">火线3</p>
          </li>
       
            <li style="float: left;width: 33%;">
            <span ><img  style="width: 20px;margin-left: 1%;" src="/NB/ieu/img/wd.png" alt=""></span>
            <p style="font-size: 15px;font-weight: bold;">温度:<span style="color: red;">25</span><span>℃</span></p>
          </li>
           <li style="float: right;width: 33%;">
             <span ><img  style="width: 20px;margin-left: 1%;" src="/NB/ieu/img/dl.png" alt=""></span>
             <p style="font-size: 15px;font-weight: bold;">电流:<span style="color: red;">1000</span><span>安</span></p>
           </li> 
        </div>
        <div style="margin-top: 62%;margin-left: 8%;width: 100%">
          <li style=" float: left;width: 33%">
            <span ><img  style="width: 20px;margin-left: 1%;" src="/NB/ieu/img/lx.png" alt=""></span>
            <p style="font-size: 15px;font-weight: bold;">零线</p>
          </li>
       
            <li style="float: left;width: 33%;">
            <span ><img  style="width: 20px;margin-left: 1%;" src="/NB/ieu/img/wd.png" alt=""></span>
            <p style="font-size: 15px;font-weight: bold;">温度:<span style="color: red;">25</span><span>℃</span></p>
          </li>
           <li style="float: right;width: 33%;">
             <span ><img  style="width: 20px;margin-left: 1%;" src="/NB/ieu/img/dl.png" alt=""></span>
             <p style="font-size: 15px;font-weight: bold;">电流:<span style="color: red;">500</span><span>安</span></p>
           </li> 
        </div>       
     </div>
<div style="width: 48%;margin-right: 1.5%; float:right;height: 1000px;">
  <p style="font-weight: bold;font-size: 15px;text-align: center;background-color:#23a79a;height: 1.3em;line-height: 1.3em;margin-left: 0.7%">历史漏电次数</p>
   <div id="container" style="width: 100%; height: 550px;"></div>
</div>
</body>

 <script type="text/javascript" src="/NB/iff/js/jquery-3.2.0.min.js"></script>
 <script type="text/javascript" src="/pc/layui/layui.js"></script>
 <script type="text/javascript" src="/NB/iff/js/addres.js"></script>
   <script src="/NB/iff/js/echarts.js" type="text/javascript"></script>
 
   <script type="text/javascript">
    $(function(){
      $("#address").selectAddress()
      $("#town").focusout(function(){
        var province = $("#province option:selected").html()
        var city = $("#city option:selected").html()
        var town = $("#town option:selected").html()
        if(province!= '选择区域' && city!="选择建筑" && town!='选择房间'){
          console.log('区域：'+province+'\n建筑:'+city+'\n房间：'+town)
        } 
      })
    })
       var dom = document.getElementById("container");
         var myChart = echarts.init(dom);
         var app = {};
         option = null;
       option = {
         tooltip : {
             trigger: 'axis'
         },
         legend: {
             data:['火线1','火线2','火线3','零线']
         },
         toolbox: {
             show : true,
             feature : {
                 mark : {show: true},
                 dataView : {show: true, readOnly: false},
                 magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                 restore : {show: true},
                 saveAsImage : {show: true}
             }
         },
         calculable : true,
         xAxis : [
             {
                 type : 'category',
                 boundaryGap : false,
                 data : ['周一','周二','周三','周四','周五','周六','周日']
             }
         ],
         yAxis : [
             {
                 type : 'value'
             }
         ],
         series : [
             {
                 name:'火线1',
                 type:'line',
                 stack: '总量',
                 data:[1, 2, 4,5, 3,1, 6]
             },
             {
                 name:'火线2',
                 type:'line',
                 stack: '总量',
                 data:[0, 3, 5, 7,8, 9,1]
             },
             {
                 name:'火线3',
                 type:'line',
                 stack: '总量',
                 data:[0, 1, 2, 3,4, 5,6]
             },
             {
                 name:'零线',
                 type:'line',
                 stack: '总量',
                 data:[0, 2, 3, 4, 5, 6,7]
             }
         ]
     };

    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
     setTimeout(function (){  
           window.onresize = function () {      
               myChart.resize();  
                    }  
                },200) 
  </script>
</html>